<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page import="com.food.model.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<c:url value="/css/style.css" />" rel="stylesheet" type="text/css" media="screen" />
<script src="<c:url value="/js/jquery-1.9.1.min.js" />"></script>
<script src="<c:url value="/js/jquery.hoverpulse.js" />"></script>
<script type="text/javascript">
$(function(){
	var url = "getMessageMb.jsp";
	var mbid = $('input[name=messageMb]:last').val();
	$.post(url,{'mbid':mbid},
			function(data){
		$('input[name=messageMb]').after(data);
	});
	
	    $('#t4divleft3 img').hoverpulse({
	        size: 160,  // 圖片縮放的大小
	        speed: 400 // 圖片變換大小的速度 
	    });
	 $('input[name=deldel]').click(function(e){
			var answer = confirm("確定要刪除留言?");
			
			if (!answer){
				e.preventDefault();
			}
	    });
	
})

</script>
<title>看食譜</title>
 	<style type="text/css">
 	#page1{
 	width:1050px;
 	height:auto;
 	background:#FFFACD;
 	border-radius:45px;
 	-moz-border-radius:45px;
 	-webkit-border-radius:45px;
 	margin: 0 auto;
	padding: 0;
	border-width:rough;
	border-style:dashed;
	border-color:#FFFF00;
 	}
 	#t1divleft{
	float:left;
	width:520px;
	height:800px;
	background:#FFE1FF;
	border-radius:30px;
 	-moz-border-radius:30px;
 	-webkit-border-radius:30px;
	margin:30px 0px 0px 40px;
	border-width:rough;
	border-style:dashed;
	border-color:#CD0000;
	box-shadow:5px 5px 5px #AAAAAA; 
	}
	#t1divleft1{
	margin:10px 0px 0px 40px;
	
	} 
	#t1divleft2{
	padding:0px 0px 0px 40px;
	}
	#t1divleft3{
	padding:5px 0px 0px 50px;
	-webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    transform:rotate(-2deg); 
	}
	
	#t2divleft1{
	width:410px;
	height:300px;
	background:#FFFFF0;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	margin:18px 0px 0px 40px;
	box-shadow:7px 7px 7px #AAAAAA;
	-webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    transform:rotate(3deg); 
	}
	#t2divleft2{
	padding:10px 0px 0px 30px;
	}
	#t2divleft3{
	padding:5px 0px 0px 30px;
	}
	#t2divleft4{
	padding:5px 0px 0px 250px;
	}
	#t3divleft1{
	float:left;
	width:450px;
	background:#E0FFFF;
	border-radius:30px;
 	-moz-border-radius:30px;
 	-webkit-border-radius:30px;
	margin:0px 0px 0px 10px;
	border-width:rough;
	border-style:dashed;
	border-color:#0000FF;
	box-shadow:5px 5px 5px #AAAAAA;
	}
	#t3divleft2{
	height:60px;
	border-bottom:3px solid #080808;
	padding:10px 0px 0px 50px;
	}
	#t3divleft33{
	height:670px;

	}
	#t4divleft1{
	width:950px; 
	background:#DFFFDF;
	border-radius:30px;
 	-moz-border-radius:30px;
 	-webkit-border-radius:30px;
	float:left;
	margin:30px 0px 0px 55px;
	border-width:rough;
	border-style:solid;
	border-color:#00AA00;
	box-shadow:5px 5px 5px #AAAAAA;
	}
	#t4divleft2{
	height:60px;
	padding:10px 0px 0px 50px;
	}
	#t4divleft3{
	/*height:400px;*/
	}
	#t4divleft4{
	float:left;
	width:100px;
	height:100px;
	padding-left:80px;
	}
	#t4divleft5{
	float:left;
	width:500px;
	height:100px;
	}
	#t4divleft6{
	float:left;
	width:200px;
	height:100px;
	}
	#t5divleft1{
	float:left;
	width:450px;
	height:55px;
	background:#EBFFF5;
	border-radius:20px;
 	-moz-border-radius:20px;
 	-webkit-border-radius:20px;
	margin:30px 0px 10px 10px;
	border-width:rough;
	border-style:dashed;
	border-color:#00BE02;
	box-shadow:5px 5px 5px #AAAAAA;
	}
	#t5divleft2{
	 padding:0px 0px 0px 50px;
	}
	#t5divleft3{
	 padding:10px 10px 10px 10px;
	 border-radius:10px;
 	-moz-border-radius:10px;
 	-webkit-border-radius:10px;
	}
	#t5divleft4{
	padding:0px 0px 0px 20px;
	}
	#pic1{
	width:28px;
	height:40px;
	-webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    transform:rotate(-20deg); 
	}
	#pic2{
	width:28px;
	height:40px;
	-webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    transform:rotate(-15deg); 
	}
	#pic3{
	width:28px;
	height:40px;
	-webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    transform:rotate(-15deg); 
	}
	#pic4{
	width:28px;
	height:40px;
	-webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    transform:rotate(-15deg); 
	}
	#pic5{
	width:28px;
	height:40px;
	-webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    transform:rotate(-15deg); 
	}
	#t6divleft1{
	float:left;
	width:950px; 
	background:#CCCCFF;
	border-radius:30px;
 	-moz-border-radius:30px;
 	-webkit-border-radius:30px;
	margin:20px 0px 0px 55px;
	border-width:rough;
	border-style:dotted;
	border-color:#7700FF;
	box-shadow:5px 5px 5px #AAAAAA;
	}	
	#t6divleft2{
	height:40px;
	border-bottom:2px dashed #080808;
	padding:10px 0px 0px 400px;
	}
	#t6divleft3{
	height:100px;
	}
	#t7divleft1{
	width:950px; 
	background:#C6E2FF;
	border-radius:30px;
 	-moz-border-radius:30px;
 	-webkit-border-radius:30px;
	float:left;
	margin:30px 0px 20px 55px;
	border-width:rough;
	border-style:dotted;
	border-color:#0000FF;
	box-shadow:5px 5px 5px #AAAAAA;
	}
	#t7divleft2{
	height:230px;
	padding:10px 0px 0px 50px;
	}
	#t7divleft3{
	margin:15px 0px 0px 0px;
	}
	#t7divleft4{
	margin:1px 0px 0px 680px;
	}
.blue {  
    color: #d9eef7;  
    border: solid 1px #0076a3;  
    background: #0095cd;  
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));  
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');  
}  
.blue:hover {  
    background: #007ead;  
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));  
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');  
}  
.blue:active {  
    color: #80bed6;  
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));  
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');  
}
.green {  
    color: #e8f0de;  
    border: solid 1px #538312;  
    background: #64991e;  
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));  
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');  
}  
.green:hover {  
    background: #538018;  
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));  
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');  
}  
.green:active {  
    color: #a9c08c;  
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));  
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);  
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');  
}  

    </style>
    <script type="text/javascript">
	     window.onload=init;
	     function init() {
		   document.getElementById("pic1").onmouseover=mouseOver;
		   document.getElementById("pic1").onmouseout=mouseOut;
		   document.getElementById("pic2").onmouseover=mouseOver1;
		   document.getElementById("pic2").onmouseout=mouseOut1;
		   document.getElementById("pic3").onmouseover=mouseOver2;
		   document.getElementById("pic3").onmouseout=mouseOut2;
		   document.getElementById("pic4").onmouseover=mouseOver3;
		   document.getElementById("pic4").onmouseout=mouseOut3;
		   document.getElementById("pic5").onmouseover=mouseOver4;
		   document.getElementById("pic5").onmouseout=mouseOut4;
		  
		   document.getElementById("pic1").onclick=mouse1;
		   
		   document.getElementById("pic2").onclick=mouse2;
		  
		   document.getElementById("pic3").onclick=mouse3;
		
		   document.getElementById("pic4").onclick=mouse4;
		   
		   document.getElementById("pic5").onclick=mouse5;
		   
		 }
		 function mouse1(){
		 	alert("給1個冰淇淋!");
		 }
		 function mouse2(){
		 	alert("給2個冰淇淋!");
		 }
		 function mouse3(){
		 	alert("給3個冰淇淋!");
		 }
		 function mouse4(){
		 	alert("給4個冰淇淋!");
		 }
		 function mouse5(){
		 	alert("給5個冰淇淋!");
		 }
		  
		 function mouseOver(){
		   document.getElementById("pic1").src='<c:url value="/images/ice.png"/>'
			   
		 }
		 function mouseOver1(){
		 document.getElementById("pic1").src='<c:url value="/images/ice.png"/>'
		 document.getElementById("pic2").src='<c:url value="/images/ice.png"/>'
		 }
		 function mouseOver2(){
		 document.getElementById("pic1").src='<c:url value="/images/ice.png"/>'	
		 document.getElementById("pic2").src='<c:url value="/images/ice.png"/>'
		 document.getElementById("pic3").src='<c:url value="/images/ice.png"/>'
		 }	
		 function mouseOver3(){
		 document.getElementById("pic1").src='<c:url value="/images/ice.png"/>'	
		 document.getElementById("pic2").src='<c:url value="/images/ice.png"/>'
		 document.getElementById("pic3").src='<c:url value="/images/ice.png"/>'
		 document.getElementById("pic4").src='<c:url value="/images/ice.png"/>'
		 }	
		 function mouseOver4(){
		 document.getElementById("pic1").src='<c:url value="/images/ice.png"/>'	
		 document.getElementById("pic2").src='<c:url value="/images/ice.png"/>'
		 document.getElementById("pic3").src='<c:url value="/images/ice.png"/>'
		 document.getElementById("pic4").src='<c:url value="/images/ice.png"/>'
		 document.getElementById("pic5").src='<c:url value="/images/ice.png"/>'
		 }
		 function mouseOut(){
		   document.getElementById("pic1").src='<c:url value="/images/ice2.png"/>'
		 }
		 function mouseOut1(){
		   document.getElementById("pic1").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic2").src='<c:url value="/images/ice2.png"/>'
		 }
		 function mouseOut2(){
		   document.getElementById("pic1").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic2").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic3").src='<c:url value="/images/ice2.png"/>'
		 }
		 function mouseOut3(){
		   document.getElementById("pic1").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic2").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic3").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic4").src='<c:url value="/images/ice2.png"/>'
		 }
		 function mouseOut4(){
		   document.getElementById("pic1").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic2").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic3").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic4").src='<c:url value="/images/ice2.png"/>'
		   document.getElementById("pic5").src='<c:url value="/images/ice2.png"/>'
		 }
		</script>
</head>
<body>
<!-- 引入共同的頁首 -->
<c:set var="funcName" value="IND" scope="session"/>
<jsp:include page="/top/top.jsp" />

<!-- 從這裡開始寫 -->
  
	<div id="page1">
	<table >
	<tr>
	<td>
	<div id="t1divleft">
		<!-- 左上角表格 -->
		 <div id="t1divleft1">
		 	<h4>這是<a style="color:blue" href="<c:url value="/member/HisRecipe?hismbid=${writeMember.mbid}" />"><img height='40' width='40' src='${pageContext.servletContext.contextPath}/getImg?id=${writeMember.mbid}&type=MEMBER' >${writeMember.mbname}</a>於${recipe.rdate}發布的食譜&nbsp&nbsp\&nbsp分數:${recipe.rscore}</h4>
		 </div>
		 <div id="t1divleft2" >
		  <b><font style="font-size:0.4cm">國籍:&nbsp${country.countryname}&nbsp</font></b>
		  &nbsp&nbsp&nbsp&nbsp&nbsp<b><font style="font-size:0.4cm">食材分類:
		  <c:forEach varStatus="stVar"  var="foodsearch"  items="${foodsearch}" >
		 			
		 			${foodsearch.fsname}/
		 </c:forEach>
		  </font></b>
		 <p>
		 <p>
		  <b><font style="font-size:0.9cm;color:blue">${recipe.rname}</font></b>
		 </div>
		  
		 <div id="t1divleft3"><!-- 插入圖片 -->
		 	<div>
		 	  <img height='300' width='380' src='${pageContext.servletContext.contextPath}/getImg?id=${recipe.rid}&type=RECIPE'>
		 	</div>
		 </div>
		 <!-- 簡介表格 -->
		 <div id="t2divleft1">
		 	 <div id="t2divleft3">
		 		 <img src="<c:url value="/images/see2.jpg"/>"/>
		 		 <img id="t2divleft4" src="<c:url value="/images/see2.jpg"/>"/>
	  		 </div>
				  <div id="t2divleft2" style="border-bottom:2px solid #080808">
				  <b><font style=font-size:0.5cm>[食譜簡介]</font></b>
				 
			  </div>
			   <div><br/><b><font style="font-size:0.5cm">${recipe.rintroduce}</font></b></div>
	    </div>
	</div>
	<!--評分表格-->
	<div id="t5divleft1">
	 	<table>
	 	<tr>
		 <td id="t5divleft2">
			
			<b><font id="t5divleft4" style="font-size:0.6cm;color:#458B00">評分:</font></b>
			<a href="<c:url value="/recipe/GradeServlet?rid=${recipe.rid}&gscore=1" />">
			<img id="pic1" src='<c:url value="/images/ice2.png"/>'/>
			</a>
			<a href="<c:url value="/recipe/GradeServlet?rid=${recipe.rid}&gscore=2" />">
			<img id="pic2" src='<c:url value="/images/ice2.png"/>'/>
			</a>
			<a href="<c:url value="/recipe/GradeServlet?rid=${recipe.rid}&gscore=3" />">
			<img id="pic3" src='<c:url value="/images/ice2.png"/>'/>
			</a>
			<a href="<c:url value="/recipe/GradeServlet?rid=${recipe.rid}&gscore=4" />">
		    <img id="pic4" src='<c:url value="/images/ice2.png"/>'/>
		    </a>
		    <a href="<c:url value="/recipe/GradeServlet?rid=${recipe.rid}&gscore=5" />">
		    <img id="pic5" src='<c:url value="/images/ice2.png"/>'/>
		    </a>
		 </td>
		 <td id="t5divleft4">
		    <form action="<c:url value="/recipe/CollectServlet" />">
			<input type="hidden" name="rid" value="${recipe.rid}">
			<input id="t5divleft3" class="button green" type="submit" value="收藏" />
		    </form>
		 </td>
		 <tr>
		</table>
	</div>
	<!-- 食材份量表格 -->
    	<table id="t3divleft1" >
    			<tr>
    				<td id="t3divleft2" ><h3>[食材份量]</h3></td>
    			</tr>
				<tr>
		 			<td id="t3divleft3">
		 		<c:forEach varStatus="stVar"  var="fooddetail"  items="${fooddetail}" >
		 		
		 			<b><font style="font-size:0.5cm">&nbsp&nbsp${fooddetail.fdname}  ${fooddetail.fdunit}</font></b><br/><br/>
		 		
		 		</c:forEach>
		 		</td>
		 		</tr>
	 	 </table>
	<!-- 輸入做法 -->
		 <table id="t4divleft1">
		 	<tr>
		 		<td id="t4divleft2"><h3>步驟</h3></td>
			 </tr>
		 	<tr>
		 	<td id="t4divleft3">
		 	<c:forEach varStatus="stVar"  var="step"  items="${step}" >
		 			
		 			<div id="t4divleft4">
		 			<b><font style="font-size:0.4cm">${step.snumber}</font></b>
		 			</div>
		 			<div id="t4divleft5">
		 			<b><font style="font-size:0.4cm">${step.sword}</font></b>
		 			</div>
		 			<div id="t4divleft6">
		 			 <img height='80' width='80' src='${pageContext.servletContext.contextPath}/getImg?id=${step.sid}&type=STEP'>
		 			</div>
		 		</c:forEach>
		 	
		 	</td>
			 </tr>
    	</table>
	<!-- 留言表格 -->
	
		 <table id="t6divleft1">
		 	<tr>
		 		<td id="t6divleft2"><b><font size=5>留&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp言</font></b></td>
			 </tr>
		 	<tr>
		 	<td id="t6divleft3" height=450px>
		 	<c:forEach varStatus="stVar"  var="message"  items="${message}" >
		 		<h3>${message.messageword}</h3>
		 		<br/>留言者:<a href="<c:url value="/member/HisRecipe?hismbid=${message.mbid}" />">
		 		<%--<input type="hidden" name="messageMb" value="${message.mbid}"> --%>
		 		
		 		<img height='40' width='40' src='${pageContext.servletContext.contextPath}/getImg?id=${message.mbid}&type=MEMBER' >
		 		<iframe frameborder=0 scrolling="no" style="width:150px;height:40px" src="<c:url value="/GetMbName?mbid=${message.mbid}" />"></iframe>
		 		</a>
		 		<c:if test="${message.mbid eq user.mbid}">
			 		<div align="right">
			 		<form action="${pageContext.servletContext.contextPath}/DeleteServlet">
	               	<input type="hidden" name="type" value="MESSAGE">
	               	<input type="hidden" name="rid" value="${recipe.rid}">
	               	<input type="hidden" name="messageid" value="${message.messageid}">
	               	<input type="submit" class="button blue" name="deldel" value="刪除留言">
	               	</form>
			 		</div>
		 		</c:if>
		 		<hr/>
		 		<br/>
		 	</c:forEach>
		 	</td>
			 </tr>
    	</table>
	<!--回應表格-->
	<form method="post" action="<c:url value="/recipe/MessageServlet"/>">
	  <div id="t7divleft1">
		<div id="t7divleft2">
			<b><font size=5>給個回應:</font></b><br><br>
			<font size=4>Name:${user.mbname }</font>
			<input type="hidden" name="rid" value="${recipe.rid}">
			<div id="t7divleft3">
			<textarea name="messageword" placeholder="我想說......" cols="100" rows="6"></textarea>
			</div>
			<div id="t7divleft4">
			<input style="padding:5px 5px 5px 5px" class="button blue" type="reset" value="清除" />
			&nbsp;&nbsp;&nbsp;&nbsp;
			<input style="padding:5px 5px 5px 5px" class="button blue" type="submit" value="送出" />
			</div>
			</div>
		</div>
		</form>
		<td>
		<tr>
		
	   </table>
	 </div>
	 
		<c:if test="${not empty success }">
			<script type="text/javascript">
				$(function() {
					alert("收藏食譜成功!!");
				});
			</script>
		</c:if>
		
		
		<c:if test="${not empty fail }">
		<script type="text/javascript">
		$(function() {
			alert("您已經收藏過此食譜!!");
		});
		</script>
		</c:if>
		
		<c:if test="${not empty failgrade }">
		<script type="text/javascript">
		$(function() {
			alert("已經給過冰淇淋囉!!");
		})
		</script>
		</c:if>
		 
	<div style="clear: both;">&nbsp;</div>
<!-- 寫到這裡結束 -->

<div id="footer-wrapper">
	<div id="footer">
		<p>Copyright (c) 2010 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FCT</a>.</p>
	</div>
</div>
</body>
</html>